@charset "utf-8";
.position-margin{
    position:absolute;
    margin:0 auto;
    left:0;
    right:0;
}

.page06{
    overflow: hidden;
    position:relative;
    .page06-border{
        img{
           @extend .position-margin;
//         top:100px; 
           top:-100%;
           opacity: 0;    
        }     
    }
    .content-border{
        @extend .position-margin;
        width:130px;
        height:370px;
        top:100px; 
        .page06-mother{
            @extend .position-margin;
            left:0px;
//          bottom:-15px;
            bottom:-100%;
            z-index:99;          
        }
        .page06-mother2{
            @extend .position-margin;
            left:0px;
            bottom:-15px;
            z-index:99;    
            opacity: 0;      
        }
        .page06-ball{
            @extend .position-margin;
            bottom:-11px;
            z-index:55;
            left:-30px; 
            opacity: 0;  
                
        }
        .page06-mother-cloud{
            @extend .position-margin;
            bottom:-10px;
            left:-85px;
            z-index:56;  
            opacity: 0;             
        }
        .page06-mother-cloud2{
            @extend .position-margin;
            bottom:-10px;
            left:-85px;
            z-index:56;  
            opacity: 0;             
        }
        .page06-mother-speech01{
            @extend .position-margin; 
//          top:-10px;
            top:100%;
            left:-70px;   
            opacity: 0;
                    
        }
        .page06-mother-speech02{
            @extend .position-margin; 
            bottom:70px;
            left:-90px;    
            z-index:70;
            transform: rotateZ(-30deg);      
            opacity: 0;            
        }
        .page06-star{
            @extend .position-margin; 
//          top:-40px;
            top:120%;
            opacity: 0;
            left:115px;
        }
        .page06-mother-speech03{
            @extend .position-margin; 
            top:0;
            left:135px;
            top:-95px;
            opacity: 0;
        }
        .page06-speech03-p{
             @extend .position-margin;             
             font-size: 20px;
             top:-65px;
             left:150px;
             width:60px;
             opacity: 0;
             
        }
        .page06-mother-title{
            @extend .position-margin;
            width:230px;
            height:30px;
            background: #0D1744;
            color:white;
            line-height: 30px;
            text-align: center;
            font-size: 12px;
            top:-70px;
    //      left:-90px;       
            left:-500%;
            opacity: 0;

        }
    }
}



.page06.active{
    .page06-border{
        img{
            animation: page06-border 300ms ease 300ms forwards;
        }     
    }
    .content-border{
        .page06-mother{
            animation: page06-mother 300ms ease 800ms forwards;
        }
        .page06-mother2{
            animation: page06-mother2 100ms ease 2.7s infinite;
        }
        .page06-ball{
            animation: page06-ball 2s ease 800ms forwards;
        }
        .page06-mother-cloud{
            animation: page06-mother-cloud 2s ease 2s forwards;
        }
        .page06-mother-cloud2{
            animation: page06-mother-cloud2 100ms ease 2.7s infinite;
        }
        .page06-mother-speech01{
            animation: page06-mother-speech01 500ms ease 2.4s forwards;
        }
        .page06-mother-speech02{
            animation: page06-mother-speech02 500ms ease 2.7s forwards;
        }
        .page06-mother-speech03{
            animation: page06-mother-speech03 1s ease 2.8s forwards;
        }
        .page06-speech03-p{
            animation: page06-speech03-p 1s ease 2.8s forwards;
            transform-origin: left;
        }
        .page06-star{
            animation: page06-star 500ms ease 2.7s forwards;
        }
        .page06-mother-title{
            animation: page06-mother-title 500ms ease 3s forwards;
        }
    }
}


//border
@keyframes page06-border{
    0%{opacity: 1;}
    33%{top:105px;opacity: 1;}
    66%{top:85px;opacity: 1;}
    100%{top:105px;opacity: 1;}
}
//border

//mother
@keyframes page06-mother{
    0%{opacity: 1;}
    33%{bottom:10px;opacity: 1;}
    66%{bottom:-20px;opacity: 1;}
    100%{bottom:-15px;opacity: 1;}
}
//mother

//mother
@keyframes page06-mother2{
    0%{opacity: 1;}
    50%{left:1px;opacity: 1;}
    100%{left:-1px;opacity: 1;}

}
//mother


//ball
@keyframes page06-ball{
        from{}to{opacity: 1;}
}
//ball

//cloud
@keyframes page06-mother-cloud{
        from{}to{opacity: 1;}
}
//cloud

//cloud2
@keyframes page06-mother-cloud2{
    0%{opacity: 1;}
    50%{bottom:-11px;opacity: 1;}
    100%{bottom:-10px;opacity: 1;}
}
//cloud2

//speech01
@keyframes page06-mother-speech01{
    0%{opacity: 1;}
    33%{top:-20px;opacity: 1;}
    66%{top:0px;opacity: 1;}
    100%{top:-10px;opacity: 1;} 
}
//speech01s

//speech02
@keyframes page06-mother-speech02{
    0%{transform: rotateZ(-30deg); opacity: 1;}
    33%{transform:scale(1.3) rotateZ(-30deg);opacity: 1;}
    66%{transform:scale(0.8) rotateZ(-30deg);opacity: 1;}
    100%{transform:scale(1) rotateZ(-30deg); ;opacity: 1;} 
}
//speech02

//speech03
@keyframes page06-mother-speech03{
    0%{}
    33%{transform: scale(1.2);opacity: 1;}
    66%{transform: scale(0.8);opacity: 1;}
    100%{transform: scale(1);opacity: 1;}
}
//speech03

//speech03-p
@keyframes page06-speech03-p{
    0%{}
    33%{transform: scale(1.2);opacity: 1;}
    66%{transform: scale(0.8);opacity: 1;}
    100%{transform: scale(1);opacity: 1;}
}
//speech03-p

//star
@keyframes page06-star{
    0%{opacity: 1;}
    33%{top:-60px;opacity: 1;}
    66%{top:-30px;opacity: 1;}
    100%{top:-40px;opacity: 1;} 
}
//star

@keyframes page06-mother-title{
    0%{}
    33%{opacity:1;left:-80px;}
    66%{opacity:1;left:-100px;}
    100%{opacity:1;left:-95px;}
}
//star